<!DOCTYPE html>
<link rel="match" href="background-obscured-change-invalidate-expected.html">
<style>
#test {
  background-image: linear-gradient(to top, green 50%, green 50%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
}

#child {
  border: 1px solid black;
}
</style>
<div id=test class="border-color">
	<div id=child>test</div>
</div>
<script src="../../resources/run-after-layout-and-paint.js"></script>

<script>
runAfterLayoutAndPaint(function() {
  document.getElementById("test").style.backgroundSize = "100% 100%";
}, true);
</script>
